{extend name="desktop/common/base" /}
{block name="seo"}
<title>{$BaseSetting.title} - mintHouz</title>
<meta name="description" content="{$BaseSetting.description}">
<meta name="keywords" content="{$BaseSetting.keywords}">
{/block}
{block name="style"}
<link rel="stylesheet" href="{{frontend}}/lib/Swiper/swiper.min.css">
<link rel="stylesheet" href="{{frontend}}/desktop/css/page/Home.css">
{/block}

{block name="body"}
<div class="banner swiper-container">
    <div class=" swiper-wrapper">
        {notempty name="banner"}
        {volist name="banner" id="vo"}
        <div class="swiper-slide">
            <div class="des">
                <a href="{$vo.path}">
                    <h3 data-swiper-parallax="-500" data-swiper-parallax-opacity="0">
                        {$vo.title}
                    </h3>
                    <p data-swiper-parallax="-1500" data-swiper-parallax-opacity="0">
                        {$vo.description}
                    </p>
                </a>
                <span>
                    <a href="{$vo.path}" data-swiper-parallax="-4500" data-swiper-parallax-opacity="0">
                        {$vo.button}
                    </a>
                </span>
            </div>
            <div class="img-box">
                <a href="{$vo.path}">
                    <img src="{$vo.desktop}" alt="">
                </a>
            </div>
        </div>
        {/volist}
        {/notempty}
    </div>
    <div class="swiper-pagination"></div>
    <!--分页器-->
    <div class="swiper-button-prev"></div>
    <!--左箭头-->
    <div class="swiper-button-next"></div>
    <!--右箭头-->
</div>
<div class="hot common-width">
    <h3 class="hot-title"><span>House</span></h3>
    <div class="min-list">
        {notempty name="hot"}
        {volist name="hot" id="vo"}
        <div class="min-item">
            <a href="{$vo.path}">
                <h3 class="des">{$vo.title}</h3>
                <img src="{$vo.desktop}" alt="">
            </a>
        </div>
        {/volist}
        {/notempty}
    </div>
</div>
<div class="newProduct common-width">
    <h3><span>NEW PRODUCT</span></h3>
    <div>
        <!--{notempty name="starProduct"}
        <a href="{$starProduct[0]['path']}"><img src="{$starProduct[0]['desktop']}" alt=""></a>
        {/notempty}-->
        <img src="//minthouz.oss-cn-shenzhen.aliyuncs.com/images/推荐位/NewProduct/505.png" alt="">
    </div>
</div>
<!--<div class="star common-width">
    <h3><span>STAR PRODUCTS</span></h3>
    <div class="star-list">
        <div class="left">
            <div class="star-item">
                {notempty name="starProduct"}
                <a href="{$starProduct[0]['path']}"><img src="{$starProduct[0]['desktop']}" alt=""></a>
                {/notempty}
            </div>
        </div>
        <div class="right">
            {notempty name="starProduct"}
            {volist name="starProduct" id="vo" offset='1' length="3"}
            <div class="star-item">
                <a href="{$vo.path}"><img src="{$vo.desktop}" alt=""></a>
            </div>
            {/volist}
            {/notempty}
        </div>
    </div>
</div>-->
{/block}

<!--私有业务开始-->
{block name="javascript"}
<script src="{{frontend}}/lib/layer/2.4/layer.js"></script>
<script src="{{frontend}}/lib/Swiper/swiper.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: {    //可选选项，自动滑动
            delay: 8000,   //自动滑动间隔
            stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
            disableOnInteraction: false//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        },
        speed: 1000,
        pagination: {   //分页器
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {  //左右箭头
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            hideOnClick: true,
        },
        grabCursor: true,//鼠标变手
        parallax: true,//dl过度效果
    });

    $(function () {
        var noticeHeight = $('.g-notice').outerHeight();
        $('.g-hd').css({'top': noticeHeight});
        var close = $('#g-notice .close');
        close.click(function () {
            $('.g-hd').css({'top': 0});
        });
        $('.play').click(function () {
            var url = $(this).attr('data-url');
            var title = $(this).attr('data-title');
            layer.open({
                type: 2,
                title: title,
                maxmin: true,
                shadeClose: true,
                area: ['800px', '600px'],
                content: url,
            })
        });
    })
</script>
{/block}
<!--私有业务结束-->
